<template>
    <div class="tab-content">
        <div class="dataList" v-for="(l,index) in list" :key="index">
            <div class="name">
                <span class="title">{{l.title}}<span>/USDT</span></span>
                <span class="date">{{l.platform}}</span>
            </div>

            <div class="name">
                <span class="title">{{l.price}}</span>
                <span class="date">￥{{l.CNY}}</span>
            </div>
            <div class="button" @click.prevent="changesta" :class="l.lv<0?'active':''">
                <span>{{l.lv*100|parseint}}%</span>
            </div>


        </div>


    </div>
</template>

<script>
    export default {
        name: "tabContent",
        data(){
            return {
                list:[]
            }
        },
        filters:{
            parseint(val){
                let num = ''
                if(val>0){
                    num = '+' + val.toFixed(2)
                }else{
                    num = val.toFixed(2)
                }
                return num
            }
        },
        mounted() {
            this.$api.home.HeightRemindList(this.getCookie('token')).then(res=> {
                // 执行某些操作
                this.list = res.data.data

                if(res.data.data.length<1){
                    this.$router.push({path:'/home/height/noData'})
                }
            })
        }

    }
</script>

<style scoped>
    .tab-content{
        background: #fff;
        position: absolute;
        height: fit-content;
        top: 0;
        left: 0;
        right: 0;
        z-index: -1;
        padding-top: 0;
        padding-left: 0.5rem;
        padding-right: 0.5rem;

    }
    .dataList{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        border-bottom: 1px solid #eee;
        flex-wrap: wrap;
    }
    .dataList>div{
        width: 25%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        padding: 0.5rem 0;
        min-height: 4rem;

    }
    .dataList>div:first-child{
        padding-left: 1rem;
    }
    .name>span{
        display: inline-flex;
        width: 100%;
        justify-content: center;
        align-items: center;
    }
    .dataList>div:first-child span{
        justify-content: flex-start;
    }
    .title{
        font-size:0.94rem;
        font-family:PingFang SC;
        font-weight:bold;
        color:rgba(51,51,51,1);

    }
    .title span{
        font-size:0.75rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(153,153,153,1);

    }
    .date{
        font-size:0.75rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(153,153,153,1);
    }
    .button span{
        width:4rem;
        height:1.75rem;
        background:rgba(20,163,101,1);
        border-radius:0.2rem;
        font-size:0.88rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(254,255,255,1);
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }
    .button.active span{
        width:4rem;
        height:1.75rem;
        border-radius:0.2rem;
        background: #FF3131;
    }
</style>